<template>
    <div class="tab_center">
       <div class="bgColor" @click="bringColor"  v-if="!isCur">
           <slot name="nav1"></slot>
       </div>
       <div class="bgColor" @click="bringColor" v-if="isCur">
           <slot name="nav3"></slot>
       </div>
       <div class="email" @click="addLink">
            <slot name="nav2"></slot>
       </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isCur : '',
        }
    },
    methods:{
        bringColor(){
            this.isCur =!this.isCur;
            // console.log(this.isCur);
            if(this.isCur == true){
                document.body.style.backgroundColor = '#576574';
            }
            if(this.isCur == false){
                document.body.style.backgroundColor = '#c2e9fb';
            }
        },
        addLink(){
            this.$router.push({path:'/mymessage'});
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/common/variable.scss";
.tab_center{
    height: 60px;
    display: flex;
    // background: blueviolet;
    justify-content: space-between;
    div{
        width: 35px;
        height: 35px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        margin-top: 20px;
        border:1px solid $borderRadius;
    }
    .bgColor{
        margin-left: 10px;
        i{
            font-size: 25px;
            color: #808080;
        }
    }
    .email{
        margin-right: 10px;
        i{
            font-size: 20px;
            color: #808080;
        }
    }
}
</style>